<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>项目检测</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="icon" type="image/x-icon" href="/cctv/favicon.ico"/>
    <link type="text/css" rel="stylesheet" href="/cctv/css/project/checkview.css"/>
    <script type="text/javascript" src="/cctv/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/cctv/js/laydate/laydate.js"></script>
    <script type="text/javascript" src="/cctv/js/project/checkview.js"></script>
</head>
<body>
<div th:replace="navigation::navigation"></div>
<div id="tips"></div>

<div id="TitleMemu">
    <div style="width:1200px;height:100%;margin:0 auto;">
        <a href="/cctv/project/showlist" title="首页"><img src="/cctv/img/msdi.png"></a>
        <input type="button" th:value="#{project.editinmfo.menu.button1}" style="background-color:#51C83D"/>
        <input type="button" th:value="#{project.editinmfo.menu.button2}" style="background-color:#00A3FE"/>
    </div>
</div>
<!-- *************************************************************** -->
<input type="hidden" id="path" th:value="${path}"/>
<input type="hidden" id="no" th:value="${param.no}"/>
<div id="main">
    <div id="mainTitle">
        <span th:text="${'项目编辑 - ['+project.name+']'}"></span>
        <input type="button" th:value="#{project.editinmfo.main.button1}" style="background-color:#16B1AC"/>
        <input type="button" th:value="#{project.editinmfo.main.button2}" style="background-color:#FF5D23"/>
    </div>
    <!-- mian1开始 -->
    <div id="main1">
        <div id="memu1">
            <span th:text="#{project.editinmfo.pipe.title}"></span>
            <input type="button" th:value="#{project.editinmfo.menu.button1}" style="background-color:#51C83D"/>
            <input type="button" th:value="#{project.editinmfo.menu.button2}" style="background-color:#00A3FE"/>
        </div>
        <div id="head1">
            <div style="width:24px"></div>
            <div style="width:36px">No</div>
            <div style="width:119px">ST / MH</div>
            <div style="width:107px">ST / Depth</div>
            <div style="width:106px">C.L</div>
            <div style="width:106px">I.L</div>
            <div style="width:118px">FH / MH</div>
            <div style="width:106px">FH / Depth</div>
            <div style="width:106px">C.L</div>
            <div style="width:106px">I.L</div>
            <div style="width:153px">Video No</div>
            <div style="width:94px">Operation</div>
        </div>
        <!-- 输出管道列表开始 -->
        <div id="showpipe">
            <table id="tab1">
                <tr th:each="pipe:${pipes}" th:id="${pipe.id}">
                    <td width="2%"></td>
                    <td width="3%" th:text="${pipe.no}"></td>
                    <td width="10%" th:text="${pipe.smanholeno}"></td>
                    <td width="9%" th:text="${pipe.sdepth}"></td>
                    <td width="9%" th:text="${pipe.scoverlevel}"></td>
                    <td width="9%" th:text="${pipe.sinvertlevel}"></td>
                    <td width="10%" th:text="${pipe.fmanholeno}"></td>
                    <td width="9%" th:text="${pipe.fdepth}"></td>
                    <td width="9%" th:text="${pipe.fcoverlevel}"></td>
                    <td width="9%" th:text="${pipe.finvertlevel}"></td>
                    <td width="13%" th:text="${pipe.videono}" th:title="${pipe.videono}"></td>
                    <td width="8%">
                        <input type="button" th:value="#{project.editinmfo.pipe.list.button1}"/>
                        <input type="button" th:value="#{project.editinmfo.pipe.list.button2}"/>
                    </td>
                </tr>
            </table>
        </div>  <!-- 输出管道列表结束 -->
        <div style="width: 888px; height: 30px; float: left;"></div>
        <div class="export"><a th:href="@{export/pipe(id=${param.id})}">导出Data Sheet</a></div>
        <div class="export"><a th:href="@{export/xls(id=${param.id})}">导出DSD Data Sheet</a></div>
        <div class="export"><a th:href="@{export/pdf(id=${param.id})}">导出PDF</a></div>
    </div>

    <!-- main2开始 -->
    <form id="form1" method="post">
        <input id="id1" type="hidden" name="id" th:value="${pipe.id}"/>    <!-- 记录管道ID -->
        <input id="id2" type="hidden" name="project.id" th:value="${param.id}"/>    <!-- 记录项目ID -->
        <div id="main2">
            <div id="title1" style="height:30px;">
                <span style="width:102px;">Survey ID</span>
                <span style="width:102px;">Operator</span>
                <span style="width:102px;">Work Order No</span>
                <span style="width:152px;">Pipe Length Reference</span>
                <span style="width:132px;">Purpose</span>
                <span style="width:102px;">Slope</span>
                <span style="width:152px;"><a id="link1">Slope Reference No</a></span>
                <span style="width:102px;">Year Laid</span>
                <span style="width:102px;">Date</span>
                <span style="width:102px;">Time</span>
            </div>
            <div id="value1" style="height:30px;">
                <input type="text" name="no" th:value="${pipe.no}" style="width:100px;"/>
                <select name="operator" th:field="${pipe.operator}" style="width:102px;">
                    <option th:each="name:${names}" th:value="${name}" th:text="${name}"></option>
                </select>
                <input type="text" name="workorder" th:value="${pipe.workorder}" style="width:100px;"/>
                <input type="text" name="reference" th:value="${pipe.reference}" style="width:150px;"/>
                <input type="text" name="purposes" th:value="${pipe.purposes}" style="width:130px;"/>
                <select name="slope" th:field="${pipe.slope}" style="width: 102px;">
                    <option value="Y">Y</option>
                    <option value="N">N</option>
                </select>
                <input type="text" name="sloperef" th:value="${pipe.sloperef}" style="width:150px;"/>
                <input type="text" name="yearlaid" th:value="${pipe.yearlaid}" style="width:100px;"/>
                <input type="text" name="date" th:value="${pipe.date}" style="width:100px;"/>
                <input type="text" name="time" th:value="${pipe.time}" style="width:100px;"/>
            </div>
            <div id="title2" style="height:30px;">
                <span style="width:102px;">District1</span>
                <span style="width:102px;">District2</span>
                <span style="width:102px;">District3</span>
                <span style="width:181px;">Road Name</span>
                <span style="width:181px;">House Number</span>
                <span style="width:181px;">Building</span>
                <span style="width:102px;">Division</span>
                <span style="width:209px;">Drainage Area Code</span>
            </div>
            <div id="value2" style="height:30px;">
                <select th:id="${pipe.district1}" name="district1" style="width:102px;"></select>
                <select th:id="${pipe.district2}" name="district2" style="width:102px;"></select>
                <select th:id="${pipe.district3}" name="district3" style="width:102px;"></select>
                <input type="text" name="roadname" th:value="${pipe.roadname}" style="width:179px;"/>
                <input type="text" name="housenum" th:value="${pipe.housenum}" style="width:179px;"/>
                <input type="text" name="building" th:value="${pipe.building}" style="width:179px;"/>
                <input type="text" name="division" th:value="${pipe.division}" style="width:100px;background-color:#EBEBE4;">
                <input type="text" name="areacode" th:value="${pipe.areacode}" style="width:207px;background-color:#EBEBE4;">
            </div>
            <div id="title3" style="height:30px;">
                <span style="width:102px;">Start MH</span>
                <span style="width:102px;">Finish MH</span>
                <span style="width:102px;">Use</span>
                <span style="width:102px;">Direction</span>
                <span style="width:102px;">Size(Dia)W</span>
                <span style="width:102px;">Size(Dia)H</span>
                <span style="width:110px;">Shape</span>
                <span style="width:110px;">Material</span>
                <span style="width:109px;">Lining</span>
                <span style="width:102px;">Pipe Length</span>
                <span style="width:102px;">Total Length</span>
            </div>
            <div id="value3" style="height:30px;">
                <input type="text" name="smanholeno" th:value="${pipe.smanholeno}" style="width:100px;">
                <input type="text" name="fmanholeno" th:value="${pipe.fmanholeno}" style="width:100px;">
                <select name="uses" th:field="${pipe.uses}" style="width:102px;">
                    <option value="F">Foul</option>
                    <option value="S">Surface water</option>
                    <option value="C">Combined</option>
                    <option value="T">Trade effluent</option>
                    <option value="W">Watercourse</option>
                    <option value="O">Others</option>
                    <option value="U">Unknown</option>
                    <option value="">--</option>
                </select>
                <select name="dire" th:field="${pipe.dire}" style="width:102px;">
                    <option value="D">Downstream</option>
                    <option value="U">Upstream</option>
                    <option value="">--</option>
                </select>
                <input type="text" name="hsize" th:value="${pipe.hsize}" style="width:100px;">
                <select name="hsize" th:field="${pipe.hsize}" style="width:102px;">
                    <option value="">--</option>
                    <option value="80">80</option>
                    <option value="100">100</option>
                    <option value="150">150</option>
                    <option value="225">225</option>
                    <option value="375">375</option>
                    <option value="450">450</option>
                    <option value="525">525</option>
                    <option value="600">600</option>
                    <option value="675">675</option>
                    <option value="750">750</option>
                    <option value="825">825</option>
                    <option value="900">900</option>
                    <option value="1050">1050</option>
                    <option value="1200">1200</option>
                    <option value="1350">1350</option>
                    <option value="1500">1500</option>
                    <option value="自定义">自定义</option>
                </select>
                <input type="text" name="wsize" th:value="${pipe.wsize}" style="width:100px;">
                <select name="shape" th:field="${pipe.shape}" style="width:110px;">
                    <option value="A">Arched with Flat Bottom</option>
                    <option value="B">Barrel e.g. Beer Barrel Shape</option>
                    <option value="C">Circular</option>
                    <option value="E">Egg Shape</option>
                    <option value="H">Horseshoe</option>
                    <option value="O">Oval</option>
                    <option value="K">Kerb Block</option>
                    <option value="R">Rectangular</option>
                    <option value="S">Square</option>
                    <option value="T">Trapezoidal</option>
                    <option value="U">U-shaped with Flat Top</option>
                    <option value="Z">Other</option>
                    <option value="">--</option>
                </select>
                <select name="mater" th:field="${pipe.mater}" style="width:110px;">
                    <option value="AC">Asbestos Cement</option>
                    <option value="BL">Bitumen Lining</option>
                    <option value="BR">Brick</option>
                    <option value="CI">Cast Iron</option>
                    <option value="CL">Cement Mortar Lining</option>
                    <option value="CO">Concrete</option>
                    <option value="CS">Concrete Segments</option>
                    <option value="DI">Ductile Iron</option>
                    <option value="EP">Epoxy</option>
                    <option value="FC">Fibre Cement</option>
                    <option value="FRP">Fibre Reinforced Plastics</option>
                    <option value="GI">Galvanised Iron</option>
                    <option value="MAC">Masonry in Regular Courses</option>
                    <option value="MAR">Masonry in Randomly Coursed</option>
                    <option value="PVC">Polyvinyl Chloride</option>
                    <option value="PE">Polyethylene</option>
                    <option value="PF">Pitch Fibre</option>
                    <option value="PP">Polypropylene</option>
                    <option value="PS">Polyester</option>
                    <option value="RC">Reinforced Concrete</option>
                    <option value="SPC">Sprayed Concrete</option>
                    <option value="ST">Steel</option>
                    <option value="VC">Vitrified Clay</option>
                    <option value="X">Unidentified Material</option>
                    <option value="XI">Unidentified Type of Iron or Steel</option>
                    <option value="XP">Unidentified Type of Plastics</option>
                    <option value="Z">Other</option>
                    <option value="">--</option>
                </select>
                <select name="lining" th:field="${pipe.lining}" style="width:109px;">
                    <option value="CF">Close Fit Lining</option>
                    <option value="CIP">Cured In Place Lining</option>
                    <option value="CP">Lining With Continuous Pipes</option>
                    <option value="DP">Lining With Discrete Pipes</option>
                    <option value="M">Lining Inserted During Manufacture</option>
                    <option value="N">No Lining</option>
                    <option value="SEG">Segmental Linings</option>
                    <option value="SP">Sprayed Lining</option>
                    <option value="SW">Spirally Wound Lining</option>
                    <option value="Z">Other</option>
                    <option value="">--</option>
                </select>
                <input type="text" name="pipelength" th:value="${pipe.pipelength}" style="width:100px;">
                <input type="text" name="testlength" th:value="${pipe.testlength}" style="width:100px;">
            </div>
            <div id="title4" style="height:30px;">
                <span style="width:102px;">Start Depth</span>
                <span style="width:102px;">Cover Level</span>
                <span style="width:102px;">Invert Level</span>
                <span style="width:102px;">Finish Depth</span>
                <span style="width:102px;">Cover Level</span>
                <span style="width:102px;">Invert Level</span>
                <span style="width:110px;">Category</span>
                <span style="width:110px;">Cleaned</span>
                <span style="width:109px;">Weather</span>
                <span style="width:209px;">Video No/File Name</span>
            </div>
            <div id="value4" style="height:30px;">
                <input type="text" name="sdepth" th:value="${pipe.sdepth}" style="width:100px">
                <input type="text" name="scoverlevel" th:value="${pipe.scoverlevel}" style="width:100px">
                <input type="text" name="sinvertlevel" th:value="${pipe.sinvertlevel}" style="width:100px;background-color:#EBEBE4;">
                <input type="text" name="fdepth" th:value="${pipe.fdepth}" style="width:100px">
                <input type="text" name="fcoverlevel" th:value="${pipe.fcoverlevel}" style="width:100px">
                <input type="text" name="finvertlevel" th:value="${pipe.finvertlevel}" style="width:100px;background-color:#EBEBE4;">
                <input type="text" name="category" th:value="${pipe.category}" style="width:108px;">
                <select name="cleaned" th:field="${pipe.cleaned}" style="width:110px;">
                    <option value="Y">Y</option>
                    <option value="N">N</option>
                    <option value="">--</option>
                </select>
                <select name="weather" th:field="${pipe.weather}" style="width:109px;">
                    <option value="1">Dry</option>
                    <option value="2">Heavy Rain</option>
                    <option value="3">Light Rain</option>
                    <option value="4">Showers</option>
                    <option value="">--</option>
                </select>
                <input type="text" name="videono" th:value="${pipe.videono}" style="width:207px;">
            </div>
            <div id="value5" style="height:30px;">
                <span style="width:125px;">Comments General:</span>
                <input type="text" name="comment" th:value="${pipe.comment}" style="width:1063px;margin-top:4px;" list="commentlist">
            </div>
            <div id="value6" style="height:30px;">
                <span style="width:60px;text-align: right;">Pipe ID:</span>
                <input type="text" name="pipeid" th:value="${pipe.pipeid}" style="width:200px;margin-top:4px;">
                <span style="width:100px;text-align: right;">S.A. Reason:</span>
                <select name="reason" th:field="${pipe.reason}" style="width:488px;margin-top:4px;">
                    <option value="">--</option>
                    <option value="ACNC">Access not available</option>
                    <option value="ACPS">Blockage - Abrupt Change in Pipe Size</option>
                    <option value="HMT">Blockage - Hard Material</option>
                    <option value="IBP">Blockage - Intrusion from Branch Pipe (Uncharted Connection)</option>
                    <option value="PC">Blockage - Pipe Collapsed</option>
                    <option value="SILT">Blockage - Siltation</option>
                    <option value="NBCW">Blockage / Damage - Nearby on-going Construction Work</option>
                    <option value="UC">Blockage / Damage - Utility Company</option>
                    <option value="HF">High Flow</option>
                    <option value="HWL">High Water Level</option>
                    <option value="MCNO">Manhole cannot be opened</option>
                    <option value="MM">Missing Manhole</option>
                    <option value="OTH">Other</option>
                </select>
                <span style="width:120px;text-align: right;">Survey Method:</span>
                <select name="method" th:field="${pipe.method}" style="width:200px;margin-top:4px;">
                    <option value="1">CCTV</option>
                    <option value="2">Sonar</option>
                    <option value="3">Zoom Camera</option>
                </select>
            </div>
        </div>
        <!-- 画图显示管道开始 -->
        <canvas id="showpipeimg" width="208px" height="840px"></canvas>
        <!-- 画图显示管道结束 -->
        <div id="showvideo">
            <div id="showvnp" style="width:100%;padding-bottom:5px;border-bottom:1px solid #ccc;float:left;">
                <!-- 输出视频播放器开始 -->
                <video id="video" controls="controls" poster="/cctv/img/poster1.png"></video>
                <div style="width:320px;margin-left:20px;float:left;">
                    <div class="videoTitle" style="width:320px;text-align:left;">Preview</div>
                    <img id="pic1" class="img" style="cursor:pointer;"/>
                    <div class="videoTitle" style="width:320px;text-align:left;">Picture</div>
                    <img id="pic2" class="img" style="cursor:pointer;"/>
                </div>
            </div>
            <div id="memu2">
                <div class="title" th:text="#{project.editinmfo.item.title}"></div>
                <input type="button" th:value="#{project.editinmfo.item.button1}" style="background-color:#51C83D"/>
                <input type="button" th:value="#{project.editinmfo.item.button2}" style="background-color:#00A3FE"/>
                <input type="button" th:value="#{project.editinmfo.item.button3}" style="background-color:#EF414C"/>
                <span style="width:10px;height:100%;line-height:30px;font-weight:600;text-align:center;float:left;">|</span>
                <input type="button" th:value="#{project.editinmfo.item.button4}" style="width:105px;background-color:#16B1AC"/>
                <input type="button" th:value="#{project.editinmfo.item.button5}" style="width:105px;background-color:#F54545"/>
            </div>
            <table id="title">
                <tr height="24px;" style="background-color: #505984;">
                    <th width="27px" rowspan="2"></th>
                    <th width="95px" rowspan="2">Video Time</th>
                    <th width="95px" rowspan="2">Photo No</th>
                    <th width="95px" rowspan="2">Distance</th>
                    <th width="76px" rowspan="2">Cont<br/>Def</th>
                    <th width="76px" rowspan="2">Code</th>
                    <th width="95px" rowspan="2">Dia./Dim</th>
                    <th width="95px" colspan="2">Clock</th>
                    <th width="95px" colspan="2">Intrusion</th>
                    <th width="" rowspan="2">Remarks</th>
                </tr>
                <tr height="24px;" style="background-color: #505984;">
                    <th width="46px">At</th>
                    <th width="46px">To</th>
                    <th width="46px">%</th>
                    <th width="46px">mm</th>
                </tr>
            </table>
            <!-- 输出记录列表开始 -->
            <div id="showItem" style="background-color:#dddddd;">
                <table id="tab2">
                    <tr th:each="item:${pipe.items}">
                        <td width="3%"><input type='hidden' th:value="${item.id}"/><a></a></td>
                        <td width="10%"><input type='text' th:value="${item.video}"/></td>
                        <td width="10%"><input type='text' th:value="${item.photo}"/><img/></td>
                        <td width="10%"><input type='text' th:value="${item.dist}"/></td>
                        <td width="8%"><input type='text' th:value="${item.cont}"/></td>
                        <td width="8%"><input type='text' th:value="${item.code}"/></td>
                        <td width="10%"><input type='text' th:value="${item.diam}"/></td>
                        <td width="5%"><input type='text' th:value="${item.clockAt}"/></td>
                        <td width="5%"><input type='text' th:value="${item.clockTo}"/></td>
                        <td width="5%"><input type='text' th:value="${item.percent}"/></td>
                        <td width="5%"><input type='text' th:value="${item.lengths}"/></td>
                        <td><input type='text' th:value="${item.remarks}"/></td>
                        <td><input type='text' th:value="${item.picture}"/></td>
                    </tr>
                </table>
                <div id="datalist" style="display:none"></div>
            </div>
            <!-- 输出记录列表结束 -->
        </div>
    </form>
    <div th:if="${!#strings.isEmpty(project.master)}" id="master"><a th:href="@{findinfo(id=${project.master})}">查看外业源数据</a></div>
</div>
<form id="form2" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" th:value="${param.id}"/>
    <input type="file" name="xfile" accept=".xlsx" style="display:none"/>
</form>
<form id="form3" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" th:value="${param.id}"/>
    <input type="file" name="files" style="display:none;"/>
</form>
<input type="file" id="file1" accept="video/*" style="display:none"/>
<input type="file" id="file2" accept="image/*" style="display:none"/>
<canvas id="canvas1" style="display:none"></canvas>

<div id="log"><img alt="" src="/cctv/img/log.png"/></div>
<div id="ishow">－</div>
<div id="toTop">△</div>

<div id="page">
    <div id="logMain">
        <div id="logTitle">
            <div style="width:114px">Date</div>
            <div style="width:648px">Operation</div>
            <div style="width:104px">User</div>
            <div style="width:16px"></div>
        </div>
        <div id="logValue">
            <table id="tab3">
            </table>
        </div>
    </div>
</div>

<!-- Code 列表 -->
<datalist id="icode"></datalist>
<datalist id="codes" th:if="${project.standard == 'HKCCEC 2009'}">
    <option th:each="code:${codes}" th:if="${code.code1 != ''}" th:value="${code.code1}" th:text="${code.explain1}" th:data-value="${code.value}"></option>
</datalist>
<datalist id="codes" th:if="${project.standard == 'MSCC 2004'}">
    <option th:each="code:${codes}" th:if="${code.code2 != ''}" th:value="${code.code2}" th:text="${code.explain1}" th:data-value="${code.value}"></option>
</datalist>
<datalist id="codes" th:if="${project.standard == 'MSCC 2013'}">
    <option th:each="code:${codes}" th:if="${code.code3 != ''}" th:value="${code.code3}" th:text="${code.explain1}" th:data-value="${code.value}"></option>
</datalist>

<datalist id='commentlist'>
    <option>Counter started reading at 1m.</option>
    <option>Counter started reading at 1m. S.A.</option>
    <option>Counter started reading at 1m. Video error Material: CI.</option>
    <option>GNC is connected to Y18</option>
    <option>Video error: FH/MH: F1</option>
    <option>Video error: FH/MH: F1. S.A.</option>
    <option>Video error: Finish Survey, U-Trap</option>
    <option>Video error: Material: CI</option>
    <option>Video error: S.A.</option>
    <option>Video error: Size: 100</option>
    <option>Video error. Size: 100. S.A.</option>
    <option>Video error: ST/MH: S1</option>
    <option>Video error: ST/MH: S1. S.A.</option>
    <option>Video error: Survey finished</option>
</datalist>

<div style="width:100%;margin-top:20px;color:#ccc;text-align:center;font-size:14px;float:left;">
    <p>香港麦斯迪埃高科技有限责任公司</p>
    <p>Copyright © 2017 All Rights Reserved</p>
</div>
</body>
</html>